<template>
  <div class="laber">
    <h2>油化蜡设备</h2>
    <div class="app-container1">
      <div class="app-container-left">
        <h1 style="margin: 25px 0 0; display: inline-block">设备温度信息</h1>
        <el-table
          v-loading="loading"
          :data="tempList"
          border
          :row-style="{ height: '40.5px' }"
          :model="queryParams"
          :cell-style="color1"
          :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
        >
          <el-table-column label="运行状态" align="center" prop="state" />
          <el-table-column label="设备编号" align="center" prop="deviceNo" />
          <el-table-column label="实际温度(℃)" align="center" prop="actualT" />
          <el-table-column label="报警上限(℃)" align="center" prop="setTH" />
          <el-table-column label="报警下限(℃)" align="center" prop="setTL" />
          <el-table-column
            label="原始设定上限(℃)"
            align="center"
            prop="setTO"
          />
        </el-table>
      </div>
      <div class="app-container-right">
        <div class="down2">
          <h1>设备能耗信息</h1>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            :fit="fit"
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column
              label="当前功耗(W)"
              align="center"
              prop="deviceConsumptionNow"
            />
            <el-table-column
              label="总能耗(KWH)"
              align="center"
              prop="deviceConsumptionAll"
            />
            <el-table-column
              label="功耗报警上限(W)"
              align="center"
              prop="deviceConsumptionSet"
            />
          </el-table>
        </div>
        <div class="down3">
          <h1>设备电流信息</h1>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column label="A项电流(A)" align="center" prop="ia" />
            <el-table-column label="B项电流(A)" align="center" prop="ib" />
            <el-table-column label="C项电流(A)" align="center" prop="ic" />
          </el-table>
        </div>
        <div class="down4">
          <h1>设备电压信息</h1>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column label="A项电压(V)" align="center" prop="ua" />
            <el-table-column label="B项电压(V)" align="center" prop="ub" />
            <el-table-column label="C项电压(V)" align="center" prop="uc" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="chart">
      <div class="down5">
        <el-date-picker
          clearable
          v-model="myTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择测试时间"
        >
        </el-date-picker>
        <el-button style="margin-left: 20px" type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索
        </el-button>
      </div>
      <div class="clear"></div>
      <div class="echarts">
        <div class="proCharts" ref="oil3"></div>
        <div class="proCharts" ref="oil4"></div>
        <div class="proCharts" ref="oil5"></div>
 
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {oilTeslaThree,oilTeslaFour,oilTeslaFive,oilNowTesla,consTeslaNow } from '@/api/tesla/tsllachi.js'
export default {
  data() {
    return {    
      fit: true,
      loading: false,
      tempList: [],
      queryParams: {
        state: null,
        deviceNo: null,
        actualT: null,
        setTH: null,
        setTL: null,
        setTO: null,
      },
      oilList: [], //油化蜡列表
      myTime: "",
      tableData: [
        {
          deviceNo: null,
          deviceConsumptionNow: null,
          deviceConsumptionAll: null,
          deviceConsumptionSet: null,
          ia: null,
          ib: null,
          ic: null,
          ua: null,
          ub: null,
          uc: null,
        },
      ],
    };
  },
  mounted() {
    this.getList();
    this.getTypeList();
    this.getOilListthree();
    this.getOilListfour();
    this.getOilListfive();
  },
  methods: {
    color1({ row, column, rowIndex, columnIndex }) {
      if (row.state === "正常") {
        return;
      } else if (row.state === "温度过低") {
        return "background-color:#87CEFA;color:#fff";
      } else if (row.state === "温度过高") {
        return "background-color:#ff6666;color:#fff";
      }
    },
    /** 表格  温度*/
    getList() {
      this.loading = true;
      oilNowTesla().then((response) => {
        // console.log(response)
        this.tempList = response.data;
        this.loading = false;
      });
    },
    // 三号蜡池
    getOilListthree() {
      this.loading = true;
      oilTeslaThree(this.myTime).then((res) => {
        this.oilList = res.data;
          const option3 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["三号蜡池(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "三号蜡池(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E3 = echarts.init(this.$refs.oil3);
        E3.setOption(option3);
        window.addEventListener("resize", function () {
          E3.resize();
        });
      })
    },
    // 四号蜡池
    getOilListfour() {
      this.loading = true;
      oilTeslaFour(this.myTime).then((res) => {
        this.oilList = res.data;
          const option4 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["四号蜡池(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "四号蜡池(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E4 = echarts.init(this.$refs.oil4);
        E4.setOption(option4);
        window.addEventListener("resize", function () {
          E4.resize();
        });
      })
    },
    // 五号蜡池
    getOilListfive() {
      this.loading = true;
      oilTeslaFive(this.myTime).then((res) => {
        this.oilList = res.data;
          const option5 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["五号蜡池(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "五号蜡池(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E5 = echarts.init(this.$refs.oil5);
        E5.setOption(option5);
        window.addEventListener("resize", function () {
          E5.resize();
        });
      })
    },   
   
    // 电流电压能耗
    getTypeList() {
      this.loading = true;
      consTeslaNow().then((response) => {
        // console.log(response);
        this.tableData = response.data;
        this.loading = false;
      });
    },
// 搜索
    handleQuery() {
      // this.getList();
      // this.getTypeList();
      this.getOilListthree();
      this.getOilListfour();
      this.getOilListfive();
    },
  },
};
</script>

<style scoped>
h1 {
  color: #0072c6;
  font-size: 25px;
}

h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
/* .app-container {
  background-color: pink;
  margin-left: 160rpx;
  margin-top: 20rpx;
} */

.app-container {
  height: 550px;
}
.app-container-left {
  margin-left: 40px;
}
.down1 {
  margin-right: 10px;
}
.down2 {
  margin-right: 10px;
}
.down3 {
  margin-right: 10px;
}
.down4 {
  margin-right: 10px;
}
.demo-ruleForm{
  display: inline-block;
}

.laber >>> .el-form-item__label {
  color: #0072c6;
}
.f1 {
  float: left;
}
.f2 {
  float: left;
}
.down5 {
  float: right;
  margin-top: 20px;
  margin-right: 40px;
}
.clear {
  clear: both;
}
.app-container-left {
  width: 45%;
  height: 500px;
  float: left;
}
.app-container-right {
  width: 45%;
  height: 500px;
  float: right;
  margin-right: 28px;
}
.proCharts {
  width: 100%;
  height: 400px;
}
/* @media screen and (max-width: 1320px) {
  #up {
    overflow: scroll;
  }
} */
.aaa >>> .el-form-item__label {
  white-space: pre-line;
}
</style>
